<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            el与data的两种写法
                1.el有两种写法
                    （1）new Vue的时候配置el属性；
                    （2）先创建实例，随后再通过vm.mount('#root')指定el的值。
                2.data有两种写法
                    （1）对象式
                    （2）函数式
                    如何选择：目前使用哪种都可，但使用到组件时，data必须函数化，否则会报错。
                3.一个重要的原则
                    由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
        -->
        <!-- 准备一个容器 -->
        <div id="root">
            <h1>你好，{{name}}</h1>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

        // el的两种写法
        /*const vm = new Vue({
            //el:"#root", //第一种写法（两种写法可根据实际开发来判断使用哪种）
            data:{
                name:'覃小宝'
            }
        })
        console.log(vm);
        v.$mount('#root'); //第二种写法（使用vm.$mount('xxx')可以更灵活地在实际开发中去指定容器，前提是要给他一个变量存储Vue的实例。）*/

        // data的两种写法
        new Vue({
            el:"#root",
            //data的第一种写法：对象式
            /*data:{
                name:'覃小宝'
            }*/

            //data的第二种写法：函数式（需要用到的值必须要以return来返回）
            data:function(){
                console.log('@@@',this) //此处的this是Vue实例对象
                return{
                    name:'覃小宝'
                }
            }
        })
    </script>
</html>